<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue demo 04 事件修饰符</title>
</head>
<body>
<div id="demo">
    <button @click="counter += 1">{{counter}}</button>
    <button v-on:click="c1">{{message1}}</button>
    <button v-on:click.once="c2">{{message2}}</button>
    <a href="https://cnblogs.com" target="_blank">普通链接</a>
    <a @click.prevent href="https://cnblogs.com" target="_blank">取消默认行为</a>
    <button @click="say('hi')">内联语句</button>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message1: "Hello",
            message2: "Hello Message2",
            counter: 0,
            test: ''
        },
        methods: {
            c1() {
                this.message1 = this.message1 + '  vue!';
            },
            c2() {
                this.message2 = this.message2 + '  vue!';
            },
            say(message) {
                this.test = message;
                alert(this.test);
            },
        }
    })
</script>
</body>
</html>